<template>
  <view class="padding-lg bg-gray" style="min-height:100vh">
    <evan-form :hide-required-asterisk="true" :label-style="labelStyles" 
        ref="form" :model="formInfo">
      <view class="padding-xl bg-cus-blue text-center text-white text-lg" style="border-radius:8px">
        阳性病例人员上报
      </view>

      <view class="title-dec">
        基本信息
      </view>

      <evan-form-item label="姓名：" prop="uname" label-position="top">
        <view class="i-input">
          <input type="text" v-model="formInfo.uname" placeholder="请输入姓名" />
        </view>
      </evan-form-item>

      <view class="title-dec">
        检测情况
      </view>
      <evan-form-item prop="checkResult">
        <radio-group @change="onCheckResultChange" class="flex">
          <label class="margin-right" v-for="item in checkResultOptions" :key="item.value">
            <radio :value="item.value" :checked="item.value == formInfo.checkResult" color="#3182F8" style="transform:scale(.8)" />
            <text>{{item.label}}</text>
          </label>
        </radio-group>
      </evan-form-item>

      <view class="title-dec">
        检测地点
      </view>
      <evan-form-item prop="checkPosition">
        <radio-group @change="onCheckPositionChange" class="flex">
          <label class="margin-right" v-for="item in checkPositionOptions" :key="item.value">
            <radio :value="item.value" :checked="item.value == formInfo.checkPosition" color="#3182F8" style="transform:scale(.8)" />
            <text>{{item.label}}</text>
          </label>
        </radio-group>
      </evan-form-item>

      <view class="title-dec">
        所在地
      </view>
      <evan-form-item label="县（市、区）" prop="adminDistrict" label-position="top">
        <picker class="i-picker"
            @change="onAdminDistrictChange" :value="formInfo.adminDistrictIndex" 
            :range="adminDistrictOptions" range-key="label">
          <view class="i-input flex align-center">
            <view style="flex:1">
              {{formInfo.adminDistrictIndex >-1 ? adminDistrictOptions[formInfo.adminDistrictIndex].label : '请选择'}}
            </view>
            <view class="cuIcon-unfold text-muted"></view>
          </view>
        </picker>
      </evan-form-item>
      <evan-form-item label="街道（乡镇）" prop="adminTown" label-position="top">
        <picker class="i-picker"
            @change="onAdminTownChange" :value="formInfo.adminTownIndex" 
            :range="adminTownOptions" range-key="label">
          <view class="i-input flex align-center">
            <view style="flex:1">
              {{formInfo.adminTownIndex >-1 ? adminTownOptions[formInfo.adminTownIndex].label : '请选择'}}
            </view>
            <view class="cuIcon-unfold text-muted"></view>
          </view>
        </picker>
      </evan-form-item>
      <evan-form-item label="社区（村）" prop="adminVillage" label-position="top">
        <picker class="i-picker"
            @change="onAdminVillageChange" :value="formInfo.adminVillageIndex" 
            :range="adminVillageOptions" range-key="label">
          <view class="i-input flex align-center">
            <view style="flex:1">
              {{formInfo.adminVillageIndex >-1 ? adminVillageOptions[formInfo.adminVillageIndex].label : '请选择'}}
            </view>
            <view class="cuIcon-unfold text-muted"></view>
          </view>
        </picker>
      </evan-form-item>

      <view class="title-dec">
        家庭成员
      </view>
      <evan-form-item label="几口人：" prop="familyCount" label-position="left">
        <view class="i-input">
          <input type="number" v-model="formInfo.familyCount" placeholder="请输入" />
        </view>
      </evan-form-item>
      <evan-form-item label="几人阳性：" prop="familyCountInfected" label-position="left">
        <view class="i-input">
          <input type="number" v-model="formInfo.familyCountInfected" placeholder="请输入" />
        </view>
      </evan-form-item>
      <evan-form-item label="状态：" prop="familyCheckPosition" label-position="left">
        <radio-group @change="onFamilyCheckPositionChange" class="flex">
          <label class="margin-right" v-for="item in checkPositionOptions" :key="item.value">
            <radio :value="item.value" :checked="item.value == formInfo.familyCheckPosition" color="#3182F8" style="transform:scale(.8)" />
            <text>{{item.label}}</text>
          </label>
        </radio-group>
      </evan-form-item>

      <view class="title-dec">
        排查
      </view>
      <evan-form-item>
        <template slot="formItem">
          <view class="flex text-primary">
            <view class="padding-tb text-bold">密接情况上报：</view>
            <view @click="gotoEditLv1Relatives" class="padding-tb" style="margin-left:auto">
              <text>上报</text>
              <text class="cuIcon-right margin-left-xs"></text>
            </view>
          </view>
        </template>
      </evan-form-item>
      <evan-form-item label="密接人数：" label-position="left">
        <view class="w100 text-right">{{lv1RelativesTotal}}</view>
      </evan-form-item>
      <evan-form-item label="分布县区：" label-position="left">
        <view class="w100 text-right">{{lv1RelativesDistricts}}</view>
      </evan-form-item>
      <evan-form-item label="转运人数：" label-position="left">
        <view class="w100 text-right">{{lv1RelativesControlled}}</view>
      </evan-form-item>
      <view class="h-line margin-tb"></view>
      <evan-form-item>
        <template slot="formItem">
          <view class="flex text-primary">
            <view class="padding-tb text-bold">次密接情况上报：</view>
            <view @click="gotoEditLv2Relatives" class="padding-tb" style="margin-left:auto">
              <text>上报</text>
              <text class="cuIcon-right margin-left-xs"></text>
            </view>
          </view>
        </template>
      </evan-form-item>
      <evan-form-item label="次密接人数：" label-position="left">
        <view class="w100 text-right">{{lv2RelativesTotal}}</view>
      </evan-form-item>
      <evan-form-item label="分布县区：" label-position="left">
        <view class="w100 text-right">{{lv2RelativesDistricts}}</view>
      </evan-form-item>

      <view class="title-dec">
        与盛华关联情况
      </view>
      <evan-form-item prop="isRelativeWithSH">
        <radio-group @change="onIsRelativeWithSHChange" class="flex">
          <label class="margin-right" v-for="item in ynOptions" :key="item.value">
            <radio :value="item.value" :checked="item.value == formInfo.isRelativeWithSH" color="#3182F8" style="transform:scale(.8)" />
            <text>{{item.label}}</text>
          </label>
        </radio-group>
      </evan-form-item>

      <view class="title-dec">
        联系电话
      </view>
      <evan-form-item prop="phone">
        <view class="i-input">
          <input type="text" v-model="formInfo.phone" placeholder="请输入" />
        </view>
      </evan-form-item>

      <view class="margin-top-xl">
        <button :disabled="submiting" @click="onSubmit" class="cu-btn lg btn-fluid bg-primary">确定</button>
      </view>
    </evan-form>
  </view>
</template>

<script>
import CheckAuthMixin from '@/mixins/CheckAuthMixin'

const CACHE_KEY = 'ts_matters_submiting'

const FormInfo = {
  uname: '',
  checkResult: '2',
  checkPosition: '2',
  adminDistrict: '',
  adminDistrictIndex: -1,
  adminTown: '',
  adminTownIndex: -1,
  adminVillage: '',
  adminVillageIndex: -1,
  familyCount: '',
  familyCountInfected: '',
  familyCheckPosition: '2',
  lv1Relatives: [],
  lv2Relatives: [],
  isRelativeWithSH: '0',
  phone: '',
}

export default {
  mixins: [
    CheckAuthMixin,
  ],
  data() {
    return {
      labelStyles: {
        minWidth: '150px',
        textAlign: 'justify',
        paddingRight: '30upx',
        fontSize: '30upx',
        color: 'inherit',
      },
      submiting: false,
      formInfo: Object.assign({}, FormInfo),
      formRules: {
        uname: [{ required: true, message: '请输入姓名' }],
        checkResult: [{ required: true, message: '请选择检测情况' }],
        checkPosition: [{ required: true, message: '请选择检测地点' }],
        adminDistrict: [{ required: true, message: '请选择县（市、区）' }],
        adminTown: [{ required: true, message: '请选择街道（乡镇）' }],
        adminVillage: [{ required: true, message: '请选择社区（村）' }],
        familyCount: [{ type: 'number', required: true, message: '请填写家庭成员' }],
        familyCountInfected: [{ type: 'number', required: true, message: '请填写家庭成员' }],
        familyCheckPosition: [{ required: true, message: '请填写家庭成员' }],
        lv1Relatives: [
          {
            validator: (rule, value, callback) => {
              if (false) {
                callback(new Error(''))
              } else {
                callback()
              }
            },
          }
        ],
        lv2Relatives: [
          {
            validator: (rule, value, callback) => {
              if (false) {
                callback(new Error(''))
              } else {
                callback()
              }
            },
          }
        ],
        isRelativeWithSH: [{ required: true, message: '请选择' }],
        phone: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入手机号!'))
              } else if (!this.$utils.isMobilePhone(value)) {
                callback(new Error('请检查手机号格式!'))
              } else {
                callback()
              }
            },
          }
        ],
      },

      // 是否
      ynOptions: [
        {label: '是', value: '1'},
        {label: '否', value: '0'},
      ],
      // 检测情况：确诊，无症状
      checkResultOptions: [
        {label: '确诊', value: '1'},
        {label: '无症状', value: '2'},
      ],
      // 检测地点：隔离点，社会面
      checkPositionOptions: [
        {label: '隔离点', value: '1'},
        {label: '社会面', value: '2'},
      ],
      // 所在地：县（市、区）
      adminDistrictOptions: [
        {label: 'test 1', value: '1'},
        {label: 'test 2', value: '2'},
      ],
      // 街道（乡镇）
      adminTownOptions: [
        {label: 'test 1', value: '1'},
        {label: 'test 2', value: '2'},
      ],
      // 社区（村）
      adminVillageOptions: [
        {label: 'test 1', value: '1'},
        {label: 'test 2', value: '2'},
      ],
    }
  },
  watch: {
    submiting(val) {
      if (val) {
        uni.showLoading()
      } else {
        uni.hideLoading()
      }
    },
  },
  computed: {
    lv1RelativesTotal() {
      return 'lv1RelativesTotal'
    },
    lv1RelativesDistricts() {
      return 'lv1RelativesDistricts'
    },
    lv1RelativesControlled() {
      return 'lv1RelativesControlled'
    },
    lv2RelativesTotal() {
      return 'lv2RelativesTotal'
    },
    lv2RelativesDistricts() {
      return 'lv2RelativesDistricts'
    },
  },
  onLoad(opts) {
    this.loadState()
    this.$utils.pLog('== onLoad: ', this.formInfo)
  },
  mounted() {
    this.$refs.form.setRules(this.formRules)
  },
  methods: {
    resetState() {
      this.formInfo = Object.assign({}, FormInfo)
    },
    saveState() {
      this.$utils.tempPageData.set(this.formInfo, CACHE_KEY)
    },
    loadState() {
      const cached = this.$utils.tempPageData.get(CACHE_KEY)
      if (cached) {
        this.formInfo = cached
  
        this.formInfo.adminDistrictIndex = this.adminDistrictOptions.findIndex(x => x.value == this.formInfo.adminDistrict)
        this.formInfo.adminTownIndex = this.adminTownOptions.findIndex(x => x.value == this.formInfo.adminTown)
        this.formInfo.adminVillageIndex = this.adminVillageOptions.findIndex(x => x.value == this.formInfo.adminVillage)
      }
    },
    gotoEditLv1Relatives() {
      this.saveState()
      uni.navigateTo({
        url: `/pages/submit/lv1relatives`
      })
    },
    gotoEditLv2Relatives() {
      this.saveState()
      uni.navigateTo({
        url: `/pages/submit/lv2relatives`
      })
    },
    onIsRelativeWithSHChange(e) {
      this.formInfo.isRelativeWithSH = e.detail.value
    },
    onCheckResultChange(e) {
      this.formInfo.checkResult = e.detail.value
    },
    onCheckPositionChange(e) {
      this.formInfo.checkPosition = e.detail.value
    },
    onAdminDistrictChange(e) {
      this.formInfo.adminDistrictIndex = e.detail.value
      this.formInfo.adminDistrict = this.adminDistrictOptions[this.formInfo.adminDistrictIndex].value
    },
    onAdminTownChange(e) {
      this.formInfo.adminTownIndex = e.detail.value
      this.formInfo.adminTown = this.adminTownOptions[this.formInfo.adminTownIndex].value
    },
    onAdminVillageChange(e) {
      this.formInfo.adminVillageIndex = e.detail.value
      this.formInfo.adminVillage = this.adminVillageOptions[this.formInfo.adminVillageIndex].value
    },
    onFamilyCheckPositionChange(e) {
      this.formInfo.familyCheckPosition = e.detail.value
    },
    onSubmit() {
      this.$refs.form.validate((res) => {
        if (res) {
          this.$utils.pLog('== submiting: ', this.formInfo)
        }
      })
    },
  },
}
</script>

<style scoped>
.bg-cus-blue {
  background: #3182F8;
}
</style>